<script lang="ts" setup>
import { nextTick, ref, shallowRef } from 'vue';
import { SecsFormat } from '../../common/enums';
import { CollectionEvent } from '../../common/types';
import helper from '../../common/helpler';
import SecsFormatSelect from '../../components/SecsFormatSelect.vue';

const data = ref<CollectionEvent>({
    messages: [],
    items: []
});
const defaultSecsFormat = ref<SecsFormat>(SecsFormat.U4);
const tb1 = shallowRef<any>("tb1");
// const checkedMessages = ref(["S1F23", "S1F24", "S2F35", "S2F37", "S2F55", "S2F56", "S2F58", "S6F3", "S6F8", "S6F9", "S6F11", "S6F13", "S6F15", "S6F16", "S6F17", "S6F18", "S17F9", "S17F10", "S17F11", "S17F12"]);
// items.value.push({
//     id: '5000',
//     desc: 'ControlStateChanged',
//     format: SecsFormat.U4
// })


const load = (dataArg: CollectionEvent) => {
    data.value = dataArg;
}

const getData = () => {
    return data.value;
}

const addEmptyRow = () => {
    console.log(data.value);
    data.value.items.push({
        key: helper.getUniqueId(),
        id: '',
        desc: '',
        format: defaultSecsFormat.value
    });
    tb1.value.setScrollTop(100);
    const s1 = tb1.value.$el.childNodes[0].childNodes[2].childNodes[0];
    const s2 = tb1.value.$el.childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0];
    nextTick(() => {
        if (s2.offsetHeight > s1.clientHeight) {
            tb1.value.setScrollTop(s2.offsetHeight);
        }
    })
}

const delRow = (rowIndex: number) => {
    data.value.items.splice(rowIndex, 1);
}

defineExpose({ load, getData });
</script>
<template>
    <el-container ref="container">
        <el-header height="30px"
            style="background-color: var(--color-toolbar-1);display: flex; justify-content: space-between;justify-items: center;align-items: center;">
            <div>
                <el-icon style="cursor: pointer;" @click="addEmptyRow">
                    <Plus />
                </el-icon>
            </div>
            <div style="user-select: none;">
                <span>Default Format
                    <SecsFormatSelect v-model="defaultSecsFormat" style="width: 100px;margin-left: 3px;" filterable>
                    </SecsFormatSelect>
                </span>
                <span style="margin-left: 5px;">Total: {{ data.items.length }}</span>
            </div>
        </el-header>
        <el-main class="no-padding">
            <el-table ref="tb1" :data="data.items" style="width: 100%" height="371px">
                <el-table-column type="index" width="36px" align="right" header-align="center"></el-table-column>
                <el-table-column label="CEID" width="100px" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.id"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="Desc" header-align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.desc"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="Format" width="100px" align="center">
                    <template #default="scope">
                        <SecsFormatSelect v-model="scope.row.format" filterable></SecsFormatSelect>
                    </template>
                </el-table-column>
                <el-table-column label="Action" width="60" align="center">
                    <template #default="{ $index }">
                        <el-button link type="primary" size="small" @click="delRow($index)">
                            Delete
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer height="98px" style="padding:5px">
            <div style="user-select: none;margin: 2px 0px 3px 0px;color:#666666;">
                Auto recoginze the messages which name of value is 'CEID'
            </div>
            <el-checkbox-group v-model="data.messages">
                <el-checkbox label="S1F23" value="S1F23" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S1F24" value="S1F24" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F35" value="S2F35" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F37" value="S2F37" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F55" value="S2F55" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F56" value="S2F56" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F58" value="S2F58" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F3" value="S6F3" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F8" value="S6F8" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F9" value="S6F9" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F11" value="S6F11" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F13" value="S6F13" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F15" value="S6F15" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F16" value="S6F16" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F17" value="S6F17" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F18" value="S6F18" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S17F9" value="S17F9" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S17F10" value="S17F10" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S17F11" value="S17F11" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S17F12" value="S17F12" style="margin-right: 15px;width:62px"></el-checkbox>
            </el-checkbox-group>
        </el-footer>
    </el-container>
</template>